<template>
  <div class="home">
    <!-- topBar -->
    <iTop />
    <!-- 今日上门 -->
    <div class="lMenu">
      <div class="lContent">
        <div class="lBgColot">
          <i class="iconfont icon-shangmenfuwuxian"></i>
        </div>
        <div class="lText">
          <p class="lp1" @click="fun()">今日上门</p>
          <p class="lp2">快速预约</p>
        </div>
        <i class="gt iconfont icon-xiangyoujiantou"></i>
      </div>
      <div class="lContent">
        <div class="lBgColot">
          <i class="iconfont icon-011shangpinxiangqingqudianpu"></i>
        </div>
        <div class="lText" @click="dShop()">
          <p class="lp1">到店服务</p>
          <p class="lp2">店家5000家</p>
        </div>
        <i class="gt iconfont icon-xiangyoujiantou"></i>
      </div>
    </div>
    <!-- 商品分类 -->
    <iFenl @click.native  = cDetail(v)
      v-for="(v, i) in iClassArr"
      :key="i"
      :iClassimg="v.iClassUrl"
      :iClassText="v.iClassText"
    />
    <!-- 活动 -->
    <huod />
    <!-- 限时秒杀 -->
    <div class="shopGoods comBox">
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img class="bImg" src="../../../public/wx/b2.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img class="bImg" src="../../../public/wx/b1.jpg" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
      <div class="timeBox">
        <div @click="xsms()">
          <div class="tBox">
            <div class="tbTop">
              <h1>限时秒杀</h1>
              <van-count-down :time="time">
                <template #default="timeData">
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
            <div class="tbCon">
              <dl class="tDl">
                <dt class="tDt">
                  <img src="../../../public/wx/s1.jpg" alt="" />
                </dt>
                <dd class="tDd">
                  <span class="price1">¥158</span>
                  <s class="price2">¥316</s>
                </dd>
              </dl>
              <dl class="tDl">
                <dt class="tDt">
                  <img src="../../../public/wx/s2.jpg" alt="" />
                </dt>
                <dd class="tDd">
                  <span class="price1">¥198</span>
                  <s class="price2">¥396</s>
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <div>
          <div class="tBox">
            <div class="tbTop">
              <h1>医美特价</h1>
              <van-count-down :time="time">
                <template #default="timeData">
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
            <div class="tbCon">
              <dl class="tDl">
                <dt class="tDt">
                  <img src="../../../public/wx/s1.jpg" alt="" />
                </dt>
                <dd class="tDd">
                  <span class="price1">¥158</span>
                  <s class="price2">¥316</s>
                </dd>
              </dl>
              <dl class="tDl">
                <dt class="tDt">
                  <img src="../../../public/wx/s2.jpg" alt="" />
                </dt>
                <dd class="tDd">
                  <span class="price1">¥198</span>
                  <s class="price2">¥396</s>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 今日上新 -->
    <div class="jImg">
      <img src="../../../public/wx/i.webp" alt="">
    </div>
    <div class="iGoods">
      <div class="igBox" @click="gDetailfun(v.gid)" v-for="(v,i) in allGoods" :key="i">
        <div class="igImg">
          <img :src="v.pic" alt="">
        </div>
        <div class="igText">
          <p class="igNamr">{{v.gname}}</p>
          <p class="igPrice">{{v.price1}}</p>
          <!-- <p>{{v.gid}}</p> -->
        </div>
      </div>
    </div>
    <!-- footer -->
    <!-- <Footer /> -->
  </div>
</template>

<script>
import {getlink} from "@/api/getapi.js";
import iTop from "@/components/wx/indexTop.vue";
import iFenl from "@/components/wx/indexFenlei.vue";
// import iFooter from "../../components/wx/footer.vue";

import Vue from "vue";
import { Swipe, SwipeItem, CountDown } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(CountDown);

export default {
  components: {
    iTop,
    iFenl,
    // iFooter,
  },
  data() {
    return {
      allGoods:[],
      iClassArr: [
        { iId:"1", iClassUrl: "./wx/ico1.webp", iClassText: "美甲"},
        { iId:"2", iClassUrl: "./wx/ico2.webp", iClassText: "微整形", path:"Cmt" },
        { iId:"3", iClassUrl: "./wx/ico3.webp", iClassText: "美容"},
        { iId:"4", iClassUrl: "./wx/ico4.webp", iClassText: "美发"},
        { iId:"5", iClassUrl: "./wx/ico5.webp", iClassText: "美妆商城"},
        { iId:"6", iClassUrl: "./wx/ico6.webp", iClassText: "美睫"},
        { iId:"7", iClassUrl: "./wx/ico7.webp", iClassText: "家政",  path:"Jz" },
        { iId:"8", iClassUrl: "./wx/ico8.webp", iClassText: "到店"},
        { iId:"9", iClassUrl: "./wx/ico9.webp", iClassText: "理疗"},
        { iId:"10", iClassUrl: "./wx/ico10.webp", iClassText: "化妆"},
      ],
      time: 30 * 60 * 60 * 1000,
    };
  },
  mounted(){
    getlink("/api/findGoods").then((ok)=>{
      console.log(ok.data);
      this.allGoods=ok.data;
      // console.log(this.allGoods);
    })
  },

  methods: {
    dShop() {
      this.$router.push("/se");
    },
    xsms() {
      this.$router.push("/xsms");
    },
    fun() {
      this.$router.push("/tj");
    },

    cDetail(params){
      this.$router.push({name: params.path, params: { iId:params.id }})
      // if(params.flag){
        
      //   // this.$router.push({name: 'Cmt', params: { iId:params.id }})
      // }
    },
    gDetailfun(id){
      // console.log(id)
      this.$router.push({path:"detail",query:{
        dataid:id,
      }});
    }
  },
};
</script>             

<style scoped>
@import url("http://at.alicdn.com/t/font_2774955_534520gtzr2.css");
@media only screen and (min-width: 800px) {
  #app {
    max-width: 8rem;
    margin: 0 auto;
  }
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.lMenu {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5%;
  margin-top: 0.5rem;
}
.lContent {
  width: 48%;
  height: 1.5rem;
  border: 1px solid #ededed;
  box-shadow: #f7ebdc 0px 0px 10px;
  background: white;
  border-radius: 0.3rem;
  box-sizing: border-box;
  padding: 0 0.2rem;
}
.lBgColot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #f7ebdc;
  text-align: center;
  line-height: 0.8rem;
  float: left;
  margin-top: 0.32rem;
}
.lBgColot i {
  color: #987968;
  font-size: 0.45rem;
}
.lText {
  float: left;
  margin-top: 0.35rem;
  margin-left: 0.15rem;
}
.lp1 {
  font-size: 0.3rem;
  margin-bottom: 0.05rem;
}
.lp2 {
  color: #ddd;
}
.gt {
  height: 1.5rem;
  line-height: 1.5rem;
  float: right;
  font-size: 0.3rem;
}
.shopGoods {
  width: 100%;
  /* display: flex;
  justify-content: space-between; */
}
.banner {
  width: 50%;
  float: left;
}
.bImg {
  width: 100%;
}
.timeBox {
  width: 48%;
  margin-left: 2%;
  float: left;
}
.tbTop {
  display: flex;
  justify-content: start;
  margin-top: 0.2rem;
}
.tbTop h1 {
  margin-right: 3%;
}
.block {
  background-color: #d50018;
  border-radius: 0.15rem;
}
.price1 {
  color: #d50018;
  font-size: 0.26rem;
  margin-right: 6%;
  font-weight: bold;
}
.price2 {
  color: #acacac;
}
.tbCon {
  width: 100%;
  display: flex;
}
.tDl {
  width: 90%;
  margin-right: 4%;
  margin-top: 5%;
}
.tDt {
  width: 100%;
}
.tDt img {
  width: 100%;
  border-radius: 0.15rem;
}
.comBox {
  box-sizing: border-box;
  background: #fafafa;
  margin: 5%;
  width: 90%;
  border-radius: 0.3rem;
}
.jImg{
  width: 100%;
  margin: .4rem auto;
}
.jImg img{
  width: 100%;
}
.iGoods{
  width: 96%;
  margin-left: 2%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.igBox{
  width: 32%;
}
.igImg img{
  width: 100%;
}
.igNamr{
  font-size: .26rem;
}
</style>